CSS Frameworks

A CSS framework can save you time when styling applications. A framework is really just a stylesheet that has been designed by someone else that you are implementing into your code.

To implement these styles, you simply add a class to the html element that you'd like to style and give it the class name stated in your framework's documentation.

In addition, you can make changes to the styles using your own stylesheet. Combine and conquer!

You can use Bootstrap to jazz up your projects, but we also want you to be familiar with it because, a lot of times when you jump into a company that has a pre-existing codebase, you will encounter the use of a CSS framework.

The framework that we will be looking at today

Bootstrap Probably the most popular framework out there right now. Originally created by some guys who were working at Twitter.

Activity

We're going to style this page using Bootstrap:

unstyled page

To look something like this:

styled page

Setup

Create the following files in a folder and code along.
Open the folder in code and open index.html in your browser

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <!-- START Style Sheets -->
    <!-- Our personal style sheet -->
    <link rel="stylesheet" href="style.css" charset="utf-8">

    <!-- Bootstrap CDN -->

    <!-- END Style Sheets -->

    <title>Bootstrap Framework Example</title>
  </head>
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">WORK</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>

  <!-- START Image -->
  <div>
      <img src="img/asset_holder.jpg"/>
  </div>
  <!-- END Image -->

  <!-- START body wrapping -->
  <div>

    <!-- START Page Header -->
    <div>
      <h1>Example page header <small>Subtext for header</small></h1>
    </div>
    <!-- END Page header -->

    <!-- START Three content sections -->
  <div>
    <div>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. </p>
    </div>
    <div>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
    <div>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>
  </div>
  <!-- END Three content sections -->

    <hr>
  <!-- START Callout box -->
  <div>
    <h1>Hello, world!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in.</p>

    <!-- START Learn More link -->
    <p><a href="#">Learn more</a></p>
    <!-- END Learn More link -->
  </div>
  <!-- END Callout box -->

    <hr>

  <!-- START Information Table -->
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Quantity</th>
        <th>Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cupcakes</td>
        <td>26</td>
        <td>San Francisco</td>
      </tr>
      <tr>
        <td>Lentil Soup</td>
        <td>42</td>
        <td>Austin</td>
      </tr>
      <tr>
        <td>Sandwhich</td>
        <td>20</td>
        <td>Seattle</td>
      </tr>
    </tbody>
  </table>
    <!-- END Information Table -->

</div>
<!-- END of Body wrapping -->

  </body>
</html>

style.css

Let's Look at Bootstrap

Bootstrap's website catalogs everything that you can use to style your application. Note that their styles are responsive.

To use Bootstrap, you can download a file and keep it in your application or use a link to their CDN.

Bootstrap is a very robust framework! It has pretty much everything that you need (plus more). After this lesson, take some time to explore the site to see more of the offerings. Consider using it in your homework or projects.

Code along

Go to Bootstrap's framework page to get their stylesheets.

Direct link to documentation: https://getbootstrap.com/docs/5.1/getting-started/download/

You could download the files (but let's not do that for this exercise):
Let's use the Bootstrap CDN link to get the style's to our page. Add the CDN link into your index.html file

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

Refresh your browser and take a look at what happened after just initially linking Bootstrap.
We'll be using classes from the Layout, Content, and Components section. You can browse through these sections in the sidebar on Bootstrap's page to see some options for what we can do.

Direct link to documentation: https://getbootstrap.com/docs/5.1/components/navs/

Add the class="nav" to the ul of your nav bar
We also have to specify which li elements are nav items by adding the class nav-item
Further, we need to specify which a elements are nav links by adding the class nav-link
We can add additional styling to this. Let's add the class nav-tabs to ourul to adjust the formatting and turn our links into navigation tabs.

nav

Adjust the image

Direct link to documentation: https://getbootstrap.com/docs/5.1/content/images/

If we wanted our image to be responsive, we could add the class="img-fluid"
If we always want it to stay centered, tack on class="text-center" onto the image's parent div

Container

Direct link to documentation: https://getbootstrap.com/docs/5.1/layout/overview/

Let's start by wrapping our site content in a container: class = "container". What does this do?

We can use .container for a responsive fixed width container.

container

If we want the container to span the entire width of the viewport, we can use class="container-fluid"

container fluid

Bootstrap's grid

Let's use the built-in grid system that Bootstrap supplies.

Direct link to documentation: https://getbootstrap.com/docs/5.1/layout/grid/

On the three paragraphs below the Example header, let's put class="row" on a div that surrounds all three.
Let's give each of these paragraphs a class="col-sm"

grid

Update a button

Direct link to documentation: https://getbootstrap.com/docs/5.1/components/buttons/

Bootstrap has multiple button options:

The primary button style: class="btn btn-primary"
Quickly style to denote an action (success, danger, warning, etc.)
- class="btn btn-success"
- class="btn btn-danger"
Change the style to an outlined button instead of filled
- class="btn btn-outline-primary"
Or change the size of the button
- class="btn btn-primary btn-lg"

Choose one and add it in the a tag to turn the Learn More link to a button.

Style the table

Direct link to documentation: https://getbootstrap.com/docs/5.1/content/tables/

Add Bootstrap's default table style: class="table"

table

Add the class table-striped to give our table zebra stripes

striped table

Sections that you want to showcase

Direct link to documentation: https://getbootstrap.com/docs/5.1/components/jumbotron/

Bootstrap has something called jumbotron which has styling to showcase a section.

Let's add class="jumbotron" to the section marked as callout in our index.html.

jumbotron

NOTE: Bootstrap is fully responsive! Change the sizes of your screen to check it out.

Other CSS frameworks

Skeleton Lightweight framework that has a nice, simple grid system.

Materialize This framework is difficult to manipulate, but I like it for the parralax and the cards.

Pure CSS Similar to skeleton, this is a light framework with a grid system and responsive design.

CSS Frameworks

The framework that we will be looking at today​

Activity​

Setup​

Let's Look at Bootstrap​

Code along​

Nav bar​

Adjust the image​

Container​

Bootstrap's grid​

Update a button​

Style the table​

Sections that you want to showcase​

Other CSS frameworks​